<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">K线图示例</div>
      <div class="sub_title"></div>
      <slot name="title"></slot>
    </div>
    <div class="chart_Wrapper">
      <div id="candle_basic" style="width: 100%"></div>
      <div class="button_box">
        <el-button size="mini" type="primary" @click="changeType('volumn')">成交量</el-button>
        <el-button size="mini" type="primary" @click="changeType('money')">交易额</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { DataView } from "@antv/data-set";
import { Chart } from "@antv/g2";
import data from "./data" ;
export default {
  data() {
    return {
      chart: null,
      dataList: data,
      transData:[]
    };
  },
  created() {},
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "candle_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
    });
    this.transData = this.transformData(this.dataList);
    // 设置度量 这里只要设置一个 range 就可以了 官方示例中还设置了些 alias 但是后没用到
    this.chart.scale({
      range: {
        nice: true,
      },
    });
    // 设置自定义提示信息
    this.chart.tooltip({
      showTitle: false,
      showMarkers: false,
      //官方示例中 {index} 这个 index 解析不出来，感觉是个bug。曲线解决方法，把 index 放 data 内  transformData 的时候加到数据里进去 
      itemTpl: '<li class="g2-tooltip-list-item" data-index={mIndex}>'
        + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>'
        + '{name}{value}</li>'
    });
    // 创建子 View 用来装 K 线图
    const kView = this.chart.createView({
      // 设置子 view 的绘制区域
      region:{
        start:{ x:0, y:0 },
        end: {x:1, y:0.7 }
      },
      // 子 view 的padding
      padding: [40, 80, 40, 80],
      id:"kView"
    })
    // 给子 view 绑定数据
    kView.data( this.transData );
    // 映射图形
    // schema 表示的是自定义图形，自定义图形必须要定义 shape 。对应自定义图形提供了一些常用的图形
    kView
      .schema()
      .position("time*range")
      // 区分图形颜色
      .color("trend", (val) => {
        if (val === "上涨") {
          return "#f04864";
        }
        if (val === "下跌") {
          return "#2fc25b";
        }
      })
      .shape("candle")
      // 定义提示信息字段
      .tooltip("time*start*end*max*min*index", (time, start, end, max, min,index) => {
        return {
          mIndex:index,
          name: time,
          value:
            '<div style="padding-left: 16px;line-height: 16px;text-align: left;">开盘价：' +  start + "</div>" +
            '<div style="padding-left: 16px;line-height: 16px;text-align: left;">收盘价：' + end + "</div>" +
            '<div style="padding-left: 16px;line-height: 16px;text-align: left;">最高价：' + max + "</div>" +
            '<div style="padding-left: 16px;line-height: 16px;text-align: left;">最低价：' +  min + "</div>",
        };
      });
     // 创建子 View 用来装 柱状图
    const barView = this.chart.createView({
      // 设置柱状图区域
      region:{
        start:{ x:0, y:0.7 },
        end:{ x:1, y:1 },
      },
      // 设置柱状图 padding
      padding: [10, 80, 20, 80],
      id:"barView"
    })
    // 设置柱状图数据
    barView.data( this.transData );
    // 不显示坐标轴
    barView.axis(false);
    
    barView
      .interval()
      .position("time*volumn")
      .color('trend', val => {
        if (val === '上涨') {
          return '#f04864';
        }
        if (val === '下跌') {
          return '#2fc25b';
        }
      })
      .tooltip("time*volumn*index", (time,volumn,index) => {
        return {
          mIndex:index,
          name: time,
          value:
            `<div style="padding-left: 16px;line-height: 16px;text-align: left;">成交量：${volumn} </div>`
        };
      });

    this.chart.interaction("element-active");
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData(newValue);
    },
  },
  methods: {
    transformData(data) {
      const dv = new DataView().source(data);
      dv.transform({
        type: "map",
        callback(obj,index) {
          obj.index = index;
          obj.trend = obj.start <= obj.end ? "上涨" : "下跌";
          obj.range = [obj.start, obj.end, obj.max, obj.min];
          return obj;
        },
      });
      return dv.rows;
    },
    // 切换柱状图显示数据
    changeType(type){
      const views = this.chart.views;
      let barView = null; 
      for( let i = 0; i < views.length; i++){
        if(views[i].id === "barView") {
          barView = views[i]
        }
      }
      barView.clear();
      barView.data(this.transData);
      const temp = barView
        .interval()
        .position(`time*${type}`)
        .color('trend', val => {
          if (val === '上涨') {
            return '#f04864';
          }

          if (val === '下跌') {
            return '#2fc25b';
          }
        })
      
      switch(type){
        case 'volumn':
          temp.tooltip("time*volumn*index", (time,volumn,index) => {
            return {
              mIndex:index,
              name: time,
              value:
                `<div style="padding-left: 16px;line-height: 16px;text-align: left;">成交量：${volumn} </div>`
            };
          });
          break;
        case 'money' :
          temp.tooltip("time*money*index", (time,money,index) => {
            return {
              mIndex:index,
              name: time,
              value:
                `<div style="padding-left: 16px;line-height: 16px;text-align: left;">交易额：${money} </div>`
            };
          });
          break;
      }
      barView.render()
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
  .chart_Wrapper{
    width:100%;
    position: relative;
    .button_box{
      position: absolute;
      right: 50px;
      top: 63%;
    }
  }
}
</style>